import React, { Component } from 'react'
import './Footer.css'
import context from '../../context'
export default class Footer extends Component {
  static contextType = context
  render() {
    const { todos , UpdataAllIsDone , Clear } = this.context
    // 根据todos计算全部已完成的数据和数据的总数
    const Total = todos.length
    const Done = todos.filter((item) => item.isDone).length
    return (
      <div className="todo-footer">
        <label>
          <input
            type="checkbox"
            checked={Total === Done}
            onChange={UpdataAllIsDone}
          />
        </label>
        <span>
          <span>已完成 {Done}</span> / 全部 {Total}
        </span>
        <button className="btn btn-danger" onClick={Clear}>清除已完成任务</button>
      </div>
    )
  }
}
